import { FontAwesome } from "@expo/vector-icons";
import { Pressable, StyleSheet, Text, View } from "react-native";

type Props = {
    label: string; // 这个类型的值, 既可以是自定义类型,也可以是某个reacte-native的某个PropType
    theme?: 'primary';
    onPress?: () => void;
}
export default function Button({ label, theme, onPress }: Props) {
    if (theme === 'primary') {
        return (
            <View style={[styles.buttonContainer, { borderWidth: 4, borderColor: '#ffd33d', borderRadius: 18 },
            ]}>
                <Pressable
                    // style={styles.button}

                    // 原来是上边的写法, 现在改成这样, 可见数组会自动合并成一个大的json对象, 
                    // 类似于web的内联样式, 没准还会有强制覆盖的特性
                    style={[styles.button, { backgroundColor: 'white' }]}
                    onPress={onPress}
                >
                    <FontAwesome name="picture-o" size={18} color="#25292e" style={styles.buttonIcon} />
                    <Text style={styles.buttonLabel}>{label}</Text>

                </Pressable>
            </View>
        );
    } else {
        return (
            <View style={styles.buttonContainer}>
                <Pressable style={styles.button} onPress={onPress}>
                    <Text style={styles.buttonLabel}>{label}</Text>
                </Pressable>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    buttonContainer: {
        width: 320,
        height: 68,
        marginHorizontal: 20,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 3,
    },
    button: {
        borderRadius: 10,
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    buttonLabel: {
        color: 'green',
        fontSize: 18,
        fontWeight: "bold"
    },
    buttonIcon: {
        paddingRight: 8
    },
});